<!--
 * @Author: lzeng
 * @Date: 2020-05-20 09:18:10
 * @description: 到账奖励
-->
<template>
  <view class="main">
    <view class="money">
      <view class="reward">{{filters.formatMoney(reward)}}</view>
      <view class="txt">已到账奖励(元)</view>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="item_head">
          <view>{{item.reward_type_text}}</view>
          <view class="date">{{filters.formatDate(item.created_at, 'yyyy-MM-dd HH:mm:ss')}}</view>
        </view>
        <view class="item_foot">{{item.reward_desc}}</view>
      </view>
      <view v-if="nomore&&list.length<1" class="empty_view">
        <image src="/static/images/commission/commission-empty.png" class="empty_img" />
        <view class="tit">暂无任何内容</view>
      </view>
      <view v-if="nomore&&list.length>0" class="nomore">暂无更多数据~</view>
    </view>
  </view>
</template>

<script>
  import {
    filters
  } from '@/utils/tools.js'
  export default {
    data() {
      return {
        list: [],
        nomore: false,
        pageNo: 1,
        pageSize: 10,
        reward: '',
        filters: filters
      }
    },
    onPullDownRefresh() {
      this.pageNo = 1
      this.list = []
      this.nomore = false
      this.Pagination(false)
    },
    onReachBottom() {
      this.pageNo += 1
      this.Pagination()
    },
    onLoad() {
      this.Pagination()
    },
    methods: {
      Pagination(showLoading) {
        this.$api.mineApi.getObtainedRewards({
          page_no: this.pageNo,
          page_size: this.pageSize
        }, showLoading).then(res => {
          if (res.code == 0) {
            setTimeout(function() {
              uni.stopPullDownRefresh()
            }, 500)
            let data = res.data.user_member_reward_v_o_list
            this.reward = res.data.all_obtained_reward
            this.list = this.list.concat(data)
            if (data.length < this.pageSize) {
              this.nomore = true
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  @import '../index.scss';

  .item {
    display: flex;
    margin: 0 36rpx;
    padding: 47rpx 0;
    justify-content: space-between;
    border-bottom: 1px solid #F5F5F5;

    .item_head {
      .date {
        font-size: 24rpx;
        color: #999999;
      }
    }

    .item_foot {
      display: flex;
      align-items: center;
    }
  }

  .money {
    background: url(https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/reward_arrive.png) no-repeat 100%/100%;
    height: 218rpx;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .reward {
      font-size: 48rpx;
    }
    .txt {
      font-size: 24rpx;
    }
  }

  page {
    background-color: #fff;
  }
</style>
